﻿<!DOCTYPE html>
<html>
  <head lang="zh-CN">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=no"
    />
    <title>时间轴管理</title>
    <link rel="stylesheet" href="./css/luthor.css" />
    <!-- <link rel="stylesheet" href="css/public.css" /> -->
    <!-- <link rel="stylesheet" href="css/animate.css" /> -->
    <!-- <script src="js/wow.js"></script> -->
    <script src="js/jquery.min.js"></script>
    <!-- <script src="js/jquery_flexslider.js"></script> -->
  </head>
  <body>
    <div class="about-history" id="fzlc" style="overflow-y: hidden;">
      <header class="about-title title-white">
        <h3
          class="wow fadeInUp"
          style="animation-name: fadeInUp;width:90px;
                height:18px; font-size:18px; font-family:Microsoft YaHei; font-weight:bold; color:rgba(76,88,99,1);"
        >
          时间轴管理
        </h3>
      </header>
      <div
        class="about-history-list wow zoomIn"
        data-wow-delay=".4s"
        style="visibility: visible; animation-delay: 0.4s; animation-name: zoomIn;"
      >
        <div
          class="flex-viewport"
          style="overflow: hidden; position: relative;"
        >
          <ul
            class="slides clearfix list"
            style="width: 2600%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);"
          >
            <li style="width: 300px; float: left; display: block;">
              <div
                class="item odd"
                id="b1"
                style="background-image: url('./images/pic2.png');background-repeat: no-repeat;"
              >
                <h3>川藏铁路建设情况概述...</h3>
                <div class="desc">
                  <!-- <img src=" ./images/pic.png" alt="" /> -->
                </div>
              </div>
              <p class="datePointodd">2018年3月3日</p>
              <span
                style="width:1px;
            height:32px;
            border:1px dashed rgba(54,125,250,1); position: absolute;top: 310px;left: 50%;transform: translate(-50%);"
              ></span>
              <span
                style="width:6px;
            height:6px;
            background:rgba(54,125,250,1);
            border-radius:50%;position: absolute;top: 340px;left: 50%;transform: translate(-50%);"
              ></span>
            </li>
            <li style="width: 300px; float: left; display: block;">
              <div class="item even" id="b2">
                <h3>川藏铁路建设情况概述</h3>
                <div class="desc">
                  <img src="./images/pic1.png" alt="" />
                </div>
              </div>
              <p class="datePointeven">2018年3月3日</p>
            </li>
            <li style="width: 300px; float: left; display: block;">
              <div class="item odd" id="b3">
                <h3>川藏铁路建设情况概述</h3>
                <div class="desc">
                  <img src="./images/pic2.png" alt="" />
                </div>
              </div>
              <p class="datePointodd">2018年3月3日</p>
            </li>
            <li style="width: 300px; float: left; display: block;">
              <div class="item even" id="b4">
                <h3>川藏铁路建设情况概述</h3>
                <div class="desc">
                  <img src="./images/pic.png" alt="" />
                </div>
              </div>
              <p class="datePointeven">2018年3月3日</p>
            </li>
            <li style="width: 300px; float: left; display: block;">
              <div class="item odd" id="b5">
                <h3>川藏铁路建设情况概述</h3>
                <div class="desc">
                  <img src="./images/pic1.png" alt="" />
                </div>
              </div>
              <p class="datePointodd">2018年3月3日</p>
            </li>
            <li style="width: 300px; float: left; display: block;">
              <div class="item even" id="b6">
                <h3>川藏铁路建设情况概述</h3>
                <div class="desc">
                  <img src="./images/pic2.png" alt="" />
                </div>
              </div>
              <p class="datePointeven">2018年3月3日</p>
            </li>
            <li style="width: 300px; float: left; display: block;">
              <div class="item odd" id="b7">
                <h3>川藏铁路建设情况概述</h3>
                <div class="desc">
                  <img src="./images/pic.png" alt="" />
                </div>
              </div>
              <p class="datePointodd">2018年3月3日</p>
            </li>
            <li style="width: 300px; float: left; display: block;">
              <div class="item even" id="b8">
                <h3>川藏铁路建设情况概述</h3>
                <div class="desc">
                  <img src="./images/pic1.png" alt="" />
                </div>
              </div>
              <p class="datePointeven">2018年3月3日</p>
            </li>
            <li style="width: 300px; float: left; display: block;">
              <div class="item odd" id="b9">
                <h3>川藏铁路建设情况概述</h3>
                <div class="desc">
                  <img src="./images/pic2.png" alt="" />
                </div>
              </div>
              <p class="datePointodd">2018年3月3日</p>
            </li>
            <li style="width: 300px; float: left; display: block;">
              <div class="item even" id="b10">
                <h3>川藏铁路建设情况概述</h3>
                <div class="desc">
                  <img src="./images/pic.png" alt="" />
                </div>
              </div>
              <p class="datePointeven">2018年3月3日</p>
            </li>
            <li style="width: 300px; float: left; display: block;">
              <div class="item odd" id="b11">
                <h3>川藏铁路建设情况概述</h3>
                <div class="desc">
                  <img src="./images/pic1.png" alt="" />
                </div>
              </div>
              <p class="datePointodd">2018年3月3日</p>
            </li>
            <li style="width: 300px; float: left; display: block;">
              <div class="item even" id="b12">
                <h3>川藏铁路建设情况概述</h3>
                <div class="desc">
                  <img src="./images/pic2.png" alt="" />
                </div>
              </div>
              <p class="datePointeven">2018年3月3日</p>
            </li>
            <li style="width: 300px; float: left; display: block;"></li>
          </ul>
        </div>
        <!-- <ol class="flex-control-nav flex-control-paging">
        <li><a class="flex-active"><img src="./images/深蓝.png" alt=""></a></li>
      </ol> -->
        <ul class="flex-direction-nav">
          <li class="flex-nav-prev">
            <a class="flex-prev" href="#"
              ><img src="./images/左深.png" alt=""
            /></a>
          </li>
          <!-- <li class="flex-nav-prev"><a class="flex-prev" href="#"><img src="./images/左浅.png" alt=""></a></li> -->
          <!-- <li class="flex-nav-prev"><a class="flex-prev" href="#"><img src="./images/左深.png" alt=""></a></li> -->
          <li class="flex-nav-next">
            <a class="flex-next" href="#"
              ><img src="./images/右深.png" alt=""
            /></a>
          </li>
          <!-- <li class="flex-nav-next"><a class="flex-next" href="#"><img src="./images/右深.png" alt=""></a></li> -->
          <!-- <li class="flex-nav-next"><a class="flex-next" href="#"><img src="./images/右浅.png" alt=""></a></li> -->
        </ul>
      </div>
    </div>

    <script>
      $(function() {
        if (
          navigator.userAgent.match(
            /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
          )
        ) {
        } else {
          $(".about-history-list").flexslider({
            move: 1, // 每次滑动的图片数
            animation: "slide", //String: Select your animation type, "fade" or "slide"图片变换方式：淡入淡出或者滑动
            slideDirection: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"图片设置为滑动式时的滑动方向：左右或者上下
            slideshow: false, //Boolean: Animate slider automatically 载入页面时，是否自动播放
            itemWidth: 300,
            itemMargin: 0,
            // selector: "",                    //滚动项目选择器
            // slideshowSpeed: 7000,           //Integer: Set the speed of the slideshow cycling, in milliseconds 自动播放速度毫秒
            animationDuration: 600, //Integer: Set the speed of animations, in milliseconds动画淡入淡出效果延时
            directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)是否显示左右控制按钮
            controlNav: false, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage是否显示控制菜单
            keyboardNav: true, //Boolean: Allow slider navigating via keyboard left/right keys键盘左右方向键控制图片滑动
            mousewheel: false, //Boolean: Allow slider navigating via mousewheel鼠标滚轮控制制图片滑动
            prevText: "", //String: Set the text for the "previous" directionNav item
            nextText: "", //String: Set the text for the "next" directionNav item
            pausePlay: false, //Boolean: Create pause/play dynamic element
            pauseText: "Pause", //String: Set the text for the "pause" pausePlay item
            playText: "Play", //String: Set the text for the "play" pausePlay item
            randomize: false, //Boolean: Randomize slide order 是否随即幻灯片
            slideToStart: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide)初始化第一次显示图片位置
            animationLoop: false, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end 是否循环滚动
            pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
            pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
            controlsContainer: "", //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
            manualControls: "", //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.自定义控制导航
            manualControlEvent: "" //String:自定义导航控制触发事件:默认是click,可以设定hover
          });
          // var slider = $(".about-history-list").data("flexslider")
          // console.log(slider)

          $(".flex-prev").mouseover(function() {
            $(".flex-prev").html("<img src='./images/左蓝.png' alt=''>");
          });
          $(".flex-prev").mouseout(function() {
            $(".flex-prev").html("<img src='./images/左深.png' alt=''>");
          });
          $(".flex-next").mouseover(function() {
            $(".flex-next").html("<img src='./images/右蓝.png' alt=''>");
          });
          $(".flex-next").mouseout(function() {
            $(".flex-next").html("<img src='./images/右深.png' alt=''>");
          });

          var wow = new WOW({
            boxClass: "wow",
            animateClass: "animated",
            offset: 0,
            mobile: true,
            live: true
          });
          wow.init();
        }
      });
    </script>
  </body>
</html>
